<script setup lang='ts'>
import { poiExtPropObj } from "@/common/MapTypes"
import { reactive, ref, watch } from "vue";
import * as journalApi from "@/api/journalApi"
import { ResponseCode } from "@/common/Responsetypes";
import type { IJournalOmit } from "../journalList/journalList.vue";

import { onShow } from "@dcloudio/uni-app";
import { markerDeleted } from "@/bus";


const props = defineProps(poiExtPropObj)

const list: IJournalOmit[] = reactive([])

const popupFlexRef = ref<{ open: () => void, close: () => void } | null>(null)

watch(props, () => {
  list.splice(0, list.length)
  fetchJournalList()
  popupFlexRef.value?.open()
})

onShow(() => {
  fetchJournalList()
})

async function fetchJournalList() {
  if (props.m_id) {
    uni.showLoading()
    const result = await journalApi.findByMid(props.m_id)
    if (result.code === ResponseCode.PASS) {
      list.splice(0, list.length)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      list.push(...result.data)
    }
    uni.hideLoading()
  }

}

// const emits = defineEmits(["close", 'addMarker', 'writeJournal'])

// function handleCheckMarker() {

//   if (!userInfo) {
//     uni.showModal({
//       title: '提示',
//       content: '请先登录',
//       confirmText: '去登录',
//       success: (e) => {
//         if (e.confirm) {
//           uni.navigateTo({
//             url: '/pages/login/login'
//           })
//         }
//       }
//     })
//   } else {
//     emits('addMarker', props)
//   }

// }

function handleToJournalDetail(e: { id: number }) {
  uni.navigateTo({
    url: `/pages/journal-detail/journal-detail?id=${e.id}&origin=self`
  })
}

// function handleWriteJournal() {
//   if (!userInfo) {
//     uni.showModal({
//       title: '提示',
//       content: '请先登录',
//       confirmText: '去登录',
//       success: (e) => {
//         if (e.confirm) {
//           uni.navigateTo({
//             url: '/pages/login/login'
//           })
//         }
//       }
//     })
//   } else {
//     emits('writeJournal', props)
//   }
// }

function handleDelete() {
  // 删除
  uni.showModal({
    title: '提示',
    content: '确认删除该标记吗？',
    success: function (res) {
      if (res.confirm) {
        if (list.length > 0) {
          uni.showToast({
            title: '请先删除日记',
            icon: 'none'
          })
        } else {
          uni.$emit(markerDeleted, props)
        }
      }
    }
  })
}

defineExpose({
  open: popupFlexRef.value?.open,
})

</script>

<template>
  <view class='space-popup__container pb-20' v-show="id">
    <popupFlex ref="popupFlexRef">
      <!-- 头部 -->
      <template #header>
        <view class="space-popup__header mlr-28">
          <text class="name mb-12">{{ name }}</text>
          <text class="detail-address mt-12">{{ `${adname}${address}${name}` }}</text>
        </view>
      </template>
      <!-- 内容区域 -->
      <template #default>
        <view class="space-popup__main mlr-28 mt-28" v-if="extdata?.flag">
          <view class="space-popup__add pb-20">
            <!-- 删除日记 -->
            <uv-icon v-if="list.length === 0" @click="handleDelete" class="close" name="trash-fill" size="20"
              color="rgb(206 206 206)"></uv-icon>
            <!-- 添加日记 -->
            <navigator url="/pages/journal-create/journal-create" open-type="navigate" hover-class="navigator-hover">
              <view class="space-popup__add-warp ">
                <uv-icon name="plus"></uv-icon>
              </view>
            </navigator>
          </view>

          <!-- 日记列表 -->
          <view class="space-popup__list" v-if="list.length > 0">
            <view class="space-popup__list-item "
              :class="{ 'show-image': item?.photos?.min, 'show-lock': !item?.is_open }"
              @click="handleToJournalDetail(item)" v-for="item in list" :key="item?.id">
              <!-- 图片 -->
              <view class="space-popup__list-item__photos mr-40" v-if="item?.photos">
                <image :src="item?.photos?.min" class="space-popup__list-item__photo" mode="aspectFill"></image>
              </view>

              <!-- 内容 -->
              <view class="space-popup__list-item__title">

                <uv-text :lines="3" :text="item?.content"></uv-text>
              </view>
              <uv-icon v-if="!item?.is_open" class="lock mlr-20" name="lock-fill"></uv-icon>

            </view>
          </view>

        </view>
      </template>

    </popupFlex>
  </view>
</template>

<style scoped lang='scss'>
@import "@/styles/mixin/index.scss";
@import "./spacePopup.scss";
</style>